<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   .big{
      width: 500px;
      height: 500px;
      background-color: red;
   }
   .center{
    width: 300px;
    height: 300px;
    background-color: aqua;
   }
   .small{
    width: 100px;
    height: 100px;
    background-color: blue;
   }
</style>
<body>
   <!-- 事件冒泡，事件捕获 -->
   <div class="big">
       <div class="center">
          <div class="small"></div>
       </div>
   </div>
</body>
</html>
<script>
//   document.querySelector('.small').onclick = function () {
//     console.log('small被触发了');
//   }
//   document.querySelector('.center').onclick = function () {
//     console.log('center被触发了');
//   }
//   document.querySelector('.big').onclick = function () {
//     console.log('big被触发了');
//   }

// addEventListener 添加事件监听，有三个参数，第一参数（事件类型），第二参数（回调函数）第三个参数是事件的执行机制默认是false，当为true的时候，就是使用的事件捕获
document.querySelector('.small').addEventListener('click',function(){
    console.log('small被触发了');
},true)
document.querySelector('.center').addEventListener('click',function(){
    console.log('center被触发了');
},true)
document.querySelector('.big').addEventListener('click',function(){
    console.log('big被触发了');
},true)

// 什么是事件流？
// 事件触发，经历三个阶段，先捕获，再试目标阶段，然后是冒泡阶段，捕获是从外层到里层，冒泡是从里层到外层。目前浏览器默认的事件触发，基本都是在冒泡阶段。
</script>
